<template>
<continer class="executeList" :shadow="false">
    <template slot="search">
      <div class="detail">
      <el-row>
        <el-col :span="4" class="col">
          <span class="list-tit">
            总数
            <el-tooltip class="item" effect="dark" content="任务当前导入的外呼号码数据总量" placement="top">
              <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tip-span"></span>
            </el-tooltip>
          </span>
          <span>{{ data.total }}</span>
        </el-col>
        <el-col :span="4" class="col">
          <span class="list-tit">
            执行数
            <el-tooltip class="item" effect="dark" content="任务当前已呼叫过的外呼号码数据总量" placement="top">
              <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tip-span"></span>
            </el-tooltip>
          </span>
          <span>{{ data.called }}</span>
        </el-col>
        <el-col :span="4" class="col">
          <span class="list-tit">
            接通数
            <el-tooltip class="item" effect="dark" content="呼叫接通次数" placement="top">
              <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tip-span"></span>
            </el-tooltip>
          </span>
          <span>{{ data.dealing }}</span>
        </el-col>
        <el-col :span="4" class="col">
          <span class="list-tit">
            呼叫总次数
            <el-tooltip class="item" effect="dark" content="当前呼叫总次数，该数量为各座席呼叫次数的总和" placement="top">
              <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tip-span"></span>
            </el-tooltip>
          </span>
          <span>{{ data.callout }}</span>
        </el-col>
        <el-col :span="4" class="col">
          <span class="list-tit">
            执行率
            <el-tooltip class="item" effect="dark" content="执行数 / 总数" placement="top">
              <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tip-span"></span>
            </el-tooltip>
            </span>
          <span>{{getProcess(data)}}%</span>
        </el-col>
        <el-col :span="4" class="col">
          <span class="list-tit">
            接通率
            <el-tooltip class="item" effect="dark" content="接通次数 / 呼叫总次数" placement="top">
              <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tip-span"></span>
            </el-tooltip>
            </span>
          <span>{{getConnectionRate(data)}}%</span>
        </el-col>
      </el-row>
    </div>
    </template>
    <template slot="oprate">
      <el-button type="primary" size="mini" @click="fetchData">刷新</el-button>
    </template>
    <template slot="content">
      <configTable
        :headers="tableHeaders"
        :data="tableData"
        :pagingData="pagingData"
        @pageChange="pageChange"
        @pageSizeChange="pageSizeChange"
        @checkHeadersChange="checkHeadersChange"
        v-loading="showLoading"
        :headersConfig="false"
        ref="configTabel"
      >
        <template slot="column">
          <template v-for="(item, index) in checkHeaders">
            <u-table-column
              :resizable="false"
              :prop="item.prop"
              :label="item.label"
              :key="item.label + index"
              :sortable="item.sortable"
              :show-overflow-tooltip="true"
            >
            </u-table-column>
          </template>
        </template>
      </configTable>
    </template>
  </continer>
</template>

<script lang="ts">
import { Component, Vue, Prop, Mixins } from 'vue-property-decorator'
import configTable from '@/components/configCommon/table.vue'
import { IvrModule } from '@/store/modules/config/ivr'
import { IvrData, PagingData, TabelHeaders } from '../types/index'
import priviewDetails from './index.vue'
import continer from '@/common/views/configCommon/ui-modules/handle-wrapper.vue'
import taskMixin from '../../../components/callTaskCommon/task-mixin'
import { deepClone } from '@/utils/common'
@Component({
  name: 'ServiceNumber',
  components: { configTable, priviewDetails, continer }
})
export default class extends Mixins(taskMixin) {
  @Prop({ default: {} }) private data: any
  private showLoading: boolean = false

  private taskData: any = {}

  private mounted (): void {
    this.fetchData()
  }

  private pagingData: PagingData = { total: 0, limit: 10, page: 1 }

  private tableHeaders: TabelHeaders[] = [
    {
      label: '座席名称',
      prop: 'createUserName'
    },
    {
      label: '呼叫量',
      prop: 'called'
    },
    {
      label: '参与外呼任务时间',
      prop: 'participateTaskTime',
      sortable: true
    }
  ]

  private checkHeaders: TabelHeaders[] = []
  private tableData: IvrData[] = []

  private pageChange (page: number): void {
    this.pagingData.page = page
    this.fetchData()
  }

  private pageSizeChange (size: number): void {
    this.pagingData.page = 1
    this.pagingData.limit = size
    this.fetchData()
  }

  private checkHeadersChange (checkList): void {
    this.$set(this, 'checkHeaders', checkList)
  }

  private fetchData (): void {
    this.showLoading = true
    const actionData = Object.assign({ limit: this.pagingData.limit, page: this.pagingData.page }, { taskId: this.data._id })
    const data = { url: '/call/action/autoCallTask/execution/list', method: 'POST', hideLoading: true, data: actionData }
    IvrModule.IvrCommonAction(data).then((res: any) => {
      if (res && res.success) {
        const resList = res.list || []
        this.tableData = resList
        resList.forEach((item: any) => {
          const agentObj = deepClone(this.$store.state.common.publicCache.userListObj)[item.agentId]
          item.createUserName = agentObj ? agentObj.name : '--'
        })
        this.pagingData.total = res.count || 0
      }
      this.showLoading = false
    })
  }
}
</script>
<style lang='stylus'>
  .executeList
    .search-box
      width 100%
</style>

<style lang="stylus" scoped>
.executeList
  height 100%
.tabel
  height calc(100% - 56px)
.detail
  height 40px
  width 100%
  margin-bottom 24px
  .col
    display flex
    flex-direction column
    font-weight bold
    font-size 24px
    color #303753
    .list-tit
      font-size 12px
      color #767E91
      margin-bottom 5px
    .tip-span
      color $icon-gray
      cursor pointer
      margin-left 8px
      font-size 14px
</style>
